<template>
  <el-form>
    <el-row class="borderCss">
      <el-row class="m-top10">
        <h3>整体现状</h3>
      </el-row>
      <el-row
        style="
          padding-bottom: 30px;
          margin-top: 30px;
          border-bottom: 5px solid #f0f0f0;
        "
      >
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <img src="../boy.png" alt="" style="margin-left: 50px" />
              </el-col>
              <el-col
                :span="12"
                style="line-height: 30px"
                v-for="(info, index) in educationDataObj.findALLNum"
                :key="index"
              >
                <el-row v-if="info.code == 1"
                  >人数：<span style="color: #03a9f4">{{
                    info.num
                  }}</span></el-row
                >
                <el-row v-if="info.code == 1"
                  >预警人数：<span style="color: red">{{
                    info.levelNum
                  }}</span></el-row
                >
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <img src="../girl.png" alt="" style="margin-left: 50px" />
              </el-col>
              <el-col
                :span="12"
                style="line-height: 30px"
                v-for="(info, index) in educationDataObj.findALLNum"
                :key="index"
              >
                <el-row v-if="info.code == 2"
                  >人数：<span style="color: #03a9f4">{{
                    info.num
                  }}</span></el-row
                >
                <el-row v-if="info.code == 2"
                  >预警人数：<span style="color: red">{{
                    info.levelNum
                  }}</span></el-row
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="m-top10" style="border-bottom: 5px solid #f0f0f0">
        <el-col :span="12">
          <div id="sexBar" style="height: 250px"></div>
        </el-col>
        <el-col :span="12">
          <div id="distributionBar" style="height: 250px"></div>
        </el-col>
      </el-row>
      <el-row class="m-top10" style="border-bottom: 5px solid #f0f0f0">
        <div id="gradeWarningDistribution" style="height: 250px"></div>
      </el-row>
      <el-row class="m-left20 m-top10">
        <div id="gradeNotMeasuredDistribution" style="height: 250px"></div>
      </el-row>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  props: ["educationDataObj"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      let obj = this.educationDataObj;
      let typexAxisData = [];
      let typeSeriesData = [];
      obj.findLevelAreaNum.map((item) => {
        typexAxisData.push(item.name);
        typeSeriesData.push(item.num);
      });

      this.initChart(
        "distributionBar",
        "预警类型分布",
        typexAxisData,
        typeSeriesData
      );

      let boyList = [];
      let girlList = [];
      let sexObj = {
        sexLeve1: [],
        sexLeve2: [],
        sexLeve3: [],
      };
      obj.findLevelSexNum.map((item) => {
        if (item.level == 1) {
          sexObj.sexLeve1.push(item);
        } else if (item.level == 2) {
          sexObj.sexLeve2.push(item);
        } else if (item.level == 3) {
          sexObj.sexLeve3.push(item);
        }
      });
      for (let zz in sexObj) {
        let level = sexObj[zz];
        if (!level.length) {
          girlList.push(0);
          boyList.push(0);
        }
        level.map((item) => {
          if (item.code == "1") {
            boyList.push(item.num);
          } else if (item.code == "2") {
            girlList.push(item.num);
          }
          if (level.length < 2 && item.code == "1") {
            girlList.push(0);
          } else if (level.length < 2 && item.code == "2") {
            boyList.push(0);
          }
        });
      }
      this.initChart1("sexBar", "预警性别分布", boyList, girlList);

      let gradeList = [];
      obj.findAllGradeLevelInterveneNum.map((item) => {
        if (gradeList[item.schoolName]) {
          if (gradeList[item.schoolName][item.level]) {
            gradeList[item.schoolName][item.level].push(item);
          }
        } else {
          gradeList[item.schoolName] = {};
          if (item.level == 1) {
            gradeList[item.schoolName]["leve1"] = {
              value: item.num,
              tenantId: item.tenantId,
            };
          } else if (item.level == 2) {
            gradeList[item.schoolName]["leve2"] = {
              value: item.num,
              tenantId: item.tenantId,
            };
          } else if (item.level == 3) {
            gradeList[item.schoolName]["leve3"] = {
              value: item.num,
              tenantId: item.tenantId,
            };
          }
        }
      });
      let level1 = [];
      let level2 = [];
      let level3 = [];
      let xAxisDataGrade = [];
      for (let key in gradeList) {
        gradeList[key]["leve1"]
          ? level1.push(gradeList[key]["leve1"])
          : level1.push("0");
        gradeList[key]["leve2"]
          ? level2.push(gradeList[key]["leve2"])
          : level2.push("0");
        gradeList[key]["leve3"]
          ? level3.push(gradeList[key]["leve3"])
          : level3.push("0");
        xAxisDataGrade.push(key);
      }
      this.getGradeLevel(
        "gradeWarningDistribution",
        "各学校预警分布",
        xAxisDataGrade,
        level1,
        level2,
        level3
      );

      let gradeNoAxisData = [];
      let gradeNoSeriesData = [];
      obj.findAllGradeNoTestNum.map((item) => {
        gradeNoAxisData.push(item.schoolName);
        gradeNoSeriesData.push({ value: item.num, tenantId: item.tenantId });
      });
      this.initChart(
        "gradeNotMeasuredDistribution",
        "各学校未测分布",
        gradeNoAxisData,
        gradeNoSeriesData,
        true
      );
    },
    initChart(id, title, xAxisData, seriesData) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
        },
        grid: {
          top: "20%",
          bottom: "15%",
          height: 150,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: 20,
            data: seriesData,
            itemStyle: {
              normal: {
                color: "#409eff",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      if (id == "gradeNotMeasuredDistribution") {
        myChart.on("click", (params) => {
          // 在用户点击后控制台打印数据的名称
          console.log(params);
          this.$router.push({
            name: "学校看板",
            query: { tenantId: params.data.tenantId },
          });
        });
      }
    },
    initChart1(id, title, boyList, girlList) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
        },
        grid: {
          top: "20%",
          bottom: "15%",
          height: 150,
        },
        legend: {
          right: "10%",
          orient: "vertical",
          align: "right",
          data: ["男", "女"],
        },
        xAxis: {
          type: "category",
          data: ["一级预警", "二级预警", "三级预警"],
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            name: "男",
            emphasis: {
              focus: "series",
            },
            data: boyList,
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: "#409eff",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            type: "bar",
            name: "女",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: 20,
            data: girlList,
            itemStyle: {
              normal: {
                color: "#FF77FF",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getGradeLevel(id, title, xAxisData, level1, level2, level3) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
        },
        legend: {
          right: "10%",
          align: "right",
          data: ["一级预警", "二级预警", "三级预警"],
        },
        grid: {
          top: "20%",
          bottom: "60",
          height: 150,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            aaaa: "",
            name: "一级预警",
            type: "bar",
            barMaxWidth: 20,
            emphasis: {
              focus: "series",
            },
            data: level1,
            itemStyle: {
              normal: {
                color: "#FF4500",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            name: "二级预警",
            type: "bar",
            barMaxWidth: 20,
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                color: "#FFA07A",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
            data: level2,
          },
          {
            name: "三级预警",
            type: "bar",
            barMaxWidth: 20,
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                color: "#FFD700",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
            data: level3,
          },
        ],
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        // console.log(params);
        this.$router.push({
          name: "学校看板",
          query: { tenantId: params.data.tenantId },
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.textCenter {
  text-align: center;
}
.margin40 {
  margin: 40px;
}
.table_style td,
th {
  padding: 5px;
  font-size: 15px;
}
.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.m-bottom30 {
  margin-bottom: 30px;
}
.m-left20 {
  margin-left: 20px;
}
.m-top20 {
  margin-top: 20px;
}
.m-top10 {
  margin-top: 10px;
}
.borderCss {
  border-bottom: 6px solid #f0f0f0;
  border-right: 6px solid #f0f0f0;
  border-left: 6px solid #f0f0f0;
  margin-top: -20px;
}
.titleCss {
  margin-left: 10px;
  margin-top: 30px;
  font-weight: bold;
}
</style>
